Implementing Route-Based Code Splitting

Code splitting allows us to load JavaScript only when it's needed. Let's implement route-based code splitting with the @loadable/component package.

First, update your routes file to use code splitting:

// src/js/routes/index.js
- import Home from '../pages/Home/Home';
- import BreedDetails from '../pages/BreedDetails/BreedDetails';
+ import React from 'react';
+ import loadable from '@loadable/component';
+ import MainLayout from '../layouts/MainLayout/MainLayout';

+ // Use loadable to demonstrate route-based code splitting
+ const Home = loadable(() => import('../pages/Home/Home'), {
+   ssr: true
+ });
+ 
+ const BreedDetails = loadable(() => import('../pages/BreedDetails/BreedDetails'), {
+   ssr: true
+ });
+ 
+ const About = loadable(() => import('../pages/About/About'), {
+   ssr: false,
+   fallback: <div>Loading about page...</div>
+ });

const routes = [
  {
    path: "/",
    component: MainLayout,
    children: [
      {
        path: "",
        index: true,
        component: Home,
      },
      {
        path: "breed/:breed",
        component: BreedDetails,
      },
      {
        path: "about",
        component: About,
      }
    ]
  }
];

Note the configuration options for each component:

• ssr: true means the component will be rendered on the server, and the JavaScript for it will be included in the initial page load.
• ssr: false means the component will only be rendered on the client, reducing the initial JavaScript bundle size.
• fallback specifies what to show while the component is loading.

This route-based code splitting approach has several key benefits:

1. Reduced Initial Load Time: Only the JavaScript needed for the current page is loaded initially
2. Faster Page Transition: Code for frequently visited routes is pre-loaded
3. Better User Experience: The application feels more responsive
4. Efficient Resource Usage: Client resources are used more efficiently

You can verify code splitting is working by using your browser's developer tools to monitor network requests. When you navigate to the About page for the first time, you'll see a JavaScript file being loaded specifically for that component.

Refresh your application and navigate through the pages. You should see:

• The main layout with Header and Footer on all pages
• The Footer loads lazily (component-based code splitting)
• The About page loads only on the client side (route-based code splitting)
• Home and BreedDetails pages are rendered on the server
• Smooth client-side navigation between pages